import { useState, useEffect } from 'react';
import {
  Row,
  Col,
  Button,
  Select,
  Space,
  Table,
  Tag,
  Divider,
  Pagination,
  Spin,
} from 'antd';
import { getOrderInfoPageList, findList, getStatusList } from '../../../api';
import { getOrderListDataInfo } from '../../../redux/actions';
import { connect } from 'react-redux';
import { useNavigate } from 'react-router-dom';

const { Option } = Select;

const Order = (props) => {
  const navigate = useNavigate();
  const { list, pages, listLoading, total, getOrderListDataInfo } = props;
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(10);
  const [statusList, setStatusList] = useState([]);
  const [patientList, setPatientList] = useState([]);
  const [searchObj, setSearchObj] = useState({
    patientId: '',
    orderStatus: '',
  });

  useEffect(async () => {
    const patientListData = await findList();
    setPatientList(patientListData);
    const statusListData = await getStatusList();
    setStatusList(statusListData);
  }, []);

  useEffect(async () => {
    await getOrderListDataInfo({ page, limit, searchObj });
  }, [page, searchObj]);

  const onChangePatient = (value) => {
    setSearchObj({
      ...searchObj,
      patientId: value,
    });
    setPage(1);
  };

  const onChangeStatus = (value) => {
    setSearchObj({
      ...searchObj,
      orderStatus: value,
    });
    setPage(1);
  };

  const onChangePage = (page) => {
    setPage(page);
  };

  const gotoOrderDetail = (id) => {
    navigate('/user/orderDetail/' + id);
  };

  const columns = [
    {
      title: '就诊时间',
      render: (text) => (
        <span>
          {text.reserveDate} {text.reserveTime === 0 ? '上午' : '下午'}
        </span>
      ),
    },
    {
      title: '医院',
      dataIndex: 'hosname',
    },
    {
      title: '科室',
      dataIndex: 'depname',
    },
    {
      title: '医生',
      dataIndex: 'title',
    },
    {
      title: '医事服务费',
      dataIndex: 'amount',
    },
    {
      title: '就诊人',
      dataIndex: 'patientName',
    },
    {
      title: '订单状态',
      render: (text, record) => text.param.orderStatusString,
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Button
          size='small'
          type='link'
          onClick={() => gotoOrderDetail(text.id)}
        >
          <a>详情</a>
        </Button>
      ),
    },
  ];

  return (
    <div className='m-l-30 m-r-30 m-b-30'>
      <h2>挂号订单</h2>
      <Space>
        就诊人
        <Select style={{ width: 120 }} onChange={onChangePatient}>
          <Option value={''} key={'all'}>
            选择所有就诊人
          </Option>
          {patientList.map((_) => {
            return (
              <Option value={_.id} key={_.id}>
                {_.name}
              </Option>
            );
          })}
        </Select>
        订单状态
        <Select style={{ width: 120 }} onChange={onChangeStatus}>
          <Option value={''} key={'all'}>
            选择所有订单状态
          </Option>
          {statusList.map((_) => {
            return (
              <Option value={_.status} key={_.status}>
                {_.comment}
              </Option>
            );
          })}
        </Select>
      </Space>
      <Divider />
      {listLoading ? (
        <Spin />
      ) : (
        <Table
          columns={columns}
          dataSource={list}
          rowKey='id'
          pagination={false}
        />
      )}
      <div style={{ height: 10 }}></div>
      <Pagination
        current={page}
        total={total}
        onChange={onChangePage}
        pageSize={limit}
      />
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    list: state.order.listData.list,
    pages: state.order.listData.pages,
    total: state.order.listData.total,
    listLoading: state.order.listLoading,
  };
};
const mapDispatchToProps = { getOrderListDataInfo };
export default connect(mapStateToProps, mapDispatchToProps)(Order);
